<template>
  <p>{{$store.state.username}}</p>
  <!-- 2. 使用根模块getters的数据   -->
  <p>{{$store.getters['newName']}}</p>
  <button @click="mutationsFn">mutationsFn</button>
   <ul>
   <li v-for="item in $store.getters.boys" :key="item.id">{{item.name}}</li>
 </ul>
  <p>A的username --- {{$store.state.a.username}}</p>
   <p>A的changeName --- {{$store.getters.changeName}}</p>
    <p>B的username --- {{$store.state.b.username}}</p>
 <p>B的changeName --- {{$store.getters['b/changeName']}}</p>
 <button @click="$store.commit('b/update')">修改username</button>
  <button @click="$store.dispatch('b/update')">异步修改username</button>
  <router-view />
</template>
<script>
import { useStore  } from "vuex";
export default {
  name: "App",
  setup() {
    const store = useStore();
    console.log(store.state.username);
    console.log(store.getters.newName);
    const mutationsFn = () => {
      // 3. 提交根模块mutations函数
      // store.commit('updateName')
      // 4. 调用根模块actions函数
      store.dispatch("updateNameSync");
    };
    return { mutationsFn };
  },
};
</script>
<style lang="less">
</style>
